<% include ../header.ejs %>
<script src="/marked/lib/marked.js"></script>
<link rel="stylesheet" href="/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/select2-bootstrap-theme/dist/select2-bootstrap.min.css">
<script src="/select2/dist/js/select2.min.js"></script>
<div class="container">

    <div class="panel panel-default">
        <div class="panel-heading">
            发布新话题
        </div>
        <div class="panel-body">
            <!--话题标题group-->
            <div class="form-group">
                <div style="width: 150px; display: inline-block; float: left">
                    <!--话题分类-->
                    <input id="temCategory" type="text" value="<%= post.category %>" hidden>
                    <input id="temPostId" type="text" value="<%= post._id.toString() %>" hidden>
                    <select id="choiceCategory" class="select2-container select2-container--bootstrap select2-hidden-accessible" style="width: 150px;" tabindex="-1" aria-hidden="true">
                        <option></option>
                        <% subjects.forEach(function(subject){ %>
                        <optgroup label="<%= subject["group"] %>">
                            <% subject["categories"].forEach(function(category){ %>
                            <option value="<%= category["key"] %>"><%= category["value"] %></option>
                            <% }) %>
                            <!--<option value="HI" disabled="disabled">Hawaii</option>&ndash;&gt;&ndash;&gt;-->
                        </optgroup>
                        <% }) %>
                    </select>
                </div>
                <!--标题-->
                <div style="margin-left: 112px; overflow: hidden">
                    <input id="title-input" type="text" class="form-control" placeholder="标题" value="<%= post.title %>">
                </div>
            </div>
            <!--tags-->
            <div class="form-group">
                <input type="text" value="<%= post.tags && post.tags.join(',') %>" id="tmpTags" hidden>
                <select id="choiceTags" class="select2-container select2-container--bootstrap select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
                    <option></option>
                </select>
            </div>
            <!--内容group-->
            <div class="form-group" style="overflow: hidden">
                <div class="col-sm-5" style="padding-left: 0; overflow: scroll">
                    <textarea id="text-input" rows="20" cols="40" class="form-control" placeholder="请输入markdown格式"><%= post.markdown %></textarea>
                </div>
                <div class="col-sm-7">
                    <div id="preview"></div>
                </div>
            </div>
            <!--操作按钮-->
            <div class="form-group">
                <button id="uploadPost" class="btn btn-primary">更新</button>
            </div>
            <hr />
            <!--文件上传-->
            <div class="col-md-6 col-md-offset-6">
                <% include ../sumMondules/uploadFile.ejs %>
            </div>
        </div>
    </div>
</div>

<% include ../footer.ejs %>
<link rel="stylesheet" href="/highlight/src/styles/tomorrow-night-eighties.css">
<script src="/javascripts/highlight.pack.js"></script>
<script>
    $(function(){
        $('#nav-posts').addClass('active');

        $('#text-input').on('input', function(){
            document.getElementById('preview').innerHTML = marked($(this).val());
            hljs.initHighlighting.called = false;
            hljs.initHighlighting();

            var previewHeight = $('#preview').height();
            previewHeight = previewHeight > 40 ? previewHeight : 40;
            $('#text-input').height(previewHeight);

        }).trigger('input');

        $( "#choiceCategory").val($('#temCategory').val());
        $( "#choiceCategory" ).select2( {
            theme: "bootstrap",
            placeholder: "选择话题",
            maximumSelectionSize: 6,
            // 控制显示
            templateResult: function(data){
                return data.text;
            },
            // 选取到某个值
            templateSelection: function(data){
                return data.text;
            }
        });

        $("#choiceTags" ).select2( {
            theme: "bootstrap",
            placeholder: "输入tags",
            maximumSelectionLength: 5, //最多能够选择的个数
            tags: true, //是否可以自定义tag
            multiple: true // 支持多选
        });


        var isInitialedTags = false;
        $("#choiceCategory").on('change', function(){
            $('#choiceTags').children().remove();
            $('#choiceTags').val(null).trigger("change");
            var categoryKey = $(this).val();
            if (categoryKey){
                $.ajax({
                    type: "GET",
                    url: "/posts/api/category/tags",
                    data: {category_key: categoryKey},
                    success: function(tags){
                        var tmpTags = $("#tmpTags").val();
                        if (tmpTags){
                            tmpTags = tmpTags.split(',');
                            tags = arrayUniq(tags.concat(tmpTags));
                        }

                        var str = '<option></option>'
                        tags.forEach(function(tag){
                            str += "<option value='" + tag +  "'>" + tag + "</option>"
                        });
                        $('#choiceTags').append(str);

                        if (!isInitialedTags && tmpTags){
                            isInitialedTags = true;
                            $("#choiceTags").val(tmpTags).trigger('change');
                        }
                    },
                    error: function(){
                        return console.log('获取tags失败');
                    }
                });
            }
        }).trigger('change');

        $('#uploadPost').one('click', function uploadPost(){
            var data = {
                category: $("#choiceCategory").val(),
                title: $('#title-input').val(),
                tags: $("#choiceTags").val(),
                markdown:  $('#text-input').val()
            }
            if (!data.category) {
                $('#uploadPost').one('click', uploadPost);
                return alert('话题类型不能为空')
            }
            else if (!data.title) {
                $('#uploadPost').one('click', uploadPost);
                return alert('标题不能为空');
            }
            else if (!data.tags || !data.tags.length) {
                $('#uploadPost').one('click', uploadPost);
                return alert('关键字(tags)不能为空');
            }
            else if (!data.markdown) {
                $('#uploadPost').one('click', uploadPost);
                return alert('内容题不能为空');
            }
            $(this).css('backgroundColor', 'gray');
            $.ajax({
                type: "POST",
                url: "/posts/api/edit/" + $('#temPostId').val(),
                data: data,
                success: function(data){
                    if(data.success){
                        location.href = '/posts/show/' + $('#temPostId').val();
                    }
                    else {
                        alert(data.msg);
                    }

                },
                error: function(){
                    alert('网络错误,请重试');
                    $('#uploadPost').one('click', uploadPost);
                }
            });
        })
    });


    function arrayUniq(arr){
        var obj = {};
        arr.forEach(function(e){
            obj[e] = 1;
        });
        var newArr = [];
        for (var key in obj) newArr.push(key);
        return newArr;
    }

</script>